import { View, Text, StyleSheet, Image } from "react-native"
import React from "react"
import CheckBoxComponent from "app/components/CheckBox"
import { scale } from "react-native-size-matters"
import { colors } from "app/theme"
import { useAppSelector } from "app/redux/hooks"
import { icons } from "app/assets/icons"

type TeleHealthProps = {
  healthCheckbox?: boolean
  onPressMeetCheckBox: (data: boolean) => void
  onPressZoomCheckBox: (data: boolean) => void
}

const TeleHealthView = ({ onPressMeetCheckBox, onPressZoomCheckBox }: TeleHealthProps) => {
  const appointmentState = useAppSelector((state) => state?.createAppointment)

  return (
    <View style={styles.contentContainer}>
      <View style={styles.container}>
        <View style={styles.upperView}>
          <CheckBoxComponent
            value={appointmentState?.meetCheckBox}
            onValueChange={(newValue) => onPressMeetCheckBox(newValue)}
          />
          <Image
            source={icons?.googleMeet}
            style={{ height: scale(18), width: scale(18), marginLeft: scale(10) }}
          />
          <Text style={styles.textView}>Google Meet</Text>
        </View>
        <View style={styles?.upperView}>
          <CheckBoxComponent
            value={appointmentState?.zoomCheckBox}
            onValueChange={(newValue) => onPressZoomCheckBox(newValue)}
          />
          <Image
            source={icons?.zoom}
            style={{ height: scale(18), width: scale(18), marginLeft: scale(10) }}
          />
          <Text style={styles.textView}>Zoom Meeting</Text>
        </View>
      </View>
    </View>
  )
}

export default TeleHealthView

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    flex: 1,
    width: "100%",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: scale(10),
  },
  contentContainer: {
    backgroundColor: colors.white,
    paddingVertical: scale(10),
    borderColor: colors?.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: scale(8),
    marginTop: scale(10),
  },
  upperView: { flexDirection: "row", flex: 1, marginTop: scale(5), alignItems: "center" },
  textView: { fontSize: scale(12), color: colors.black, marginLeft: scale(5) },
  capsuleView: {
    paddingVertical: scale(3),
    paddingHorizontal: scale(10),

    borderRadius: scale(12),
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
  },
  numberTextView: {
    fontSize: scale(10),
    color: colors.black,
    paddingHorizontal: scale(8),
    paddingVertical: scale(2),
  },
  placeholderStyle: {
    marginLeft: scale(12),
  },
  repeatView2: {
    height: 22,
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 30,
    backgroundColor: colors.white,
    justifyContent: "center",
    alignItems: "center",
    width: scale(50),
    alignSelf: "center",
    paddingHorizontal: scale(2),
  },
  item: {
    height: 22,
    backgroundColor: colors.white,
    justifyContent: "center",
    alignItems: "center",
    width: scale(50),
    alignSelf: "center",
    paddingHorizontal: scale(2),
  },
})
